<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div class="test"></div>

    <!-- js按顺序引入 -->
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>

    <!-- 引入react-dom,用于操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 1.创建类式组件 组件名首字母必须大写
        class Weather extends React.Component{
            //构造器调用几次？ ———— 1次
           constructor(props){
            super(props)
                this.state = {
                    isHot:true,
                    wind:1
                }
                // 解决changeWeather的this指向问题
                this.demo = this.changeWeather.bind(this)
           }
            render(){
                //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
                const {isHot,wind} = this.state
                return <h1 onClick={this.demo}>今天天气是{isHot ?'炎热' : '凉快'}{wind}</h1>
            }
            changeWeather(){
                //changeWeather调用几次？ ———— 点几次调几次
                //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
               //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
               //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
                
               const isHot = this.state.isHot
                const wind = this.state.wind+1
                //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
                
                this.setState( {isHot:!isHot,wind:wind})


				//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
				//this.state.isHot = !isHot //这是错误的写法


            }
        }
       
    
      // 2.渲染虚拟Dom 
      ReactDOM.render(<Weather/>, document.querySelector(".test"));

    </script>
</body>
<style>

</style>

</html>